import { IndexBar, List } from "antd-mobile";
import cityJSON from "../../../public/json/cities.json";
import { useNavigate } from "react-router-dom";

console.log(cityJSON);
const City = () => {
  const navigate = useNavigate();
  return (
    <div style={{ height: "100vh" }}>
      <IndexBar>
        {cityJSON.cityList.map((v, i) => {
          return (
            <IndexBar.Panel title={v.title} index={v.title} key={i}>
              <List>
                {v.citys.map((v, i) => {
                  return (
                    <List.Item onClick={() => navigate("/?city=" + v.name)} key={i}>
                      {v.name}
                    </List.Item>
                  );
                })}
              </List>
            </IndexBar.Panel>
          );
        })}
      </IndexBar>
    </div>
  );
};

export default City;
